<template>
	<view class="contain">
		<view class="title">
			<u--input class="input" placeholder="搜索课程名" shape="circle" prefixIcon="search"
				placeholderStyle="color:#303133;" v-model="value" @confirm="search">
			</u--input>

		</view>

		<view class="list" v-for="(item,index) in courses">
			<view class="item" @click="">
				<view class="name">
					{{item.name}}
				</view>
				<view class="button">
					<u-button @click="open(index)" text="开课" type="success" size="mini"></u-button>
				</view>
				<view class="button">
					<u-button @click="edit(index)" text="编辑" type="success" size="mini"></u-button>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api

	export default {
		data() {
			return {
				value: "计算机",
				courses: "",
				time1: Number(new Date()),
				time2: Number(new Date()),
				show1: false,
				show2: false

			};

		},
		methods: {
			search() {
				let token = uni.getStorageSync("token")
				api.searchCourse(token, this.value).then((res) => {
					this.courses = res.data
					for (let i = 0; i < this.courses.length; i++) {
						// this.$set(this.courses[i], "isShow", false)

					}

				}).catch((err) => {
					console.log(err)
				})
			},
			open(index) {
				let course = this.courses[index]
				uni.navigateTo({
					url: `./addSelect?id=${course.id}`
				})
			},
			edit(index) {
				let course = this.courses[index]
				console.log(course);
				uni.navigateTo({
					url: `./editCourse?id=${course.id}`
				})
			}
		},
		onShow() {
			if (this.courses === "") {
				this.search()
			}
		}
	}
</script>

<style lang="less">
	.contain {

		.title {
			background-color: #a62618;
			padding: 30px 10px;

			.input {
				background-color: white;
			}
		}

		.form {
			height: 200px;
		}

		.list {

			.item {
				height: 60px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 10px;
				background-color: #F1F1F1;
				padding: 0px 20px;

				.name {
					width: 400px;
					font-size: 12px;

				}

				.button {
					width: 100rpx;
					margin-left: 20px;
				}

			}
		}
	}
</style>
